<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>steps 步骤条、时间轴 | 樊小书生的博客</title>
    <meta name="keywords" content="樊小书生的博客,steps 步骤条、时间轴">
    <meta name="description" content="樊小书生的博客专注于web前端学习的分享">
    <link rel="stylesheet" href="http://www.fxss5201.cn/project/css/normalize.css">
    <link rel="stylesheet" href="http://www.fxss5201.cn/project/layui/css/layui.css">
    <link rel="stylesheet" href="http://www.fxss5201.cn/project/css/hybrid.css">
    <link rel="stylesheet" href="steps.css">
    <script src="../iconfont.js"></script>
    <style>
        html {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        body {
            font-family: "Helvetica Neue","Microsoft YaHei",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .head {
            text-align: center;
            line-height: 80px;
        }
        .h2-title {
            text-align: left;
            line-height: 38px;
            font-size: 1.1em;
            font-weight: 700;
        }
        .h3-title {
            line-height: 28px;
        }
        .margin-bottom-5 {
            margin-bottom: 5px;
        }
        .site-title {
            margin: 15px 0;
        }
        .paragraph {
            margin-bottom: 8px;
        }
        .padding-left-20 {
            padding-left: 20px;
        }
        
        body .custom-class .steps-vertical .step-line  {
            left: 19px;
        }
        body .custom-class .steps-horizontal .step-line  {
            top: 19px;
        }
        .step-icon-custom-box {
            width: 40px;
            height: 40px;
        }
        .step-icon-custom {
            margin-top: -2px;
            font-size: 26px;
        }
    </style>
    <script src="http://www.fxss5201.cn/project/js/highlight.pack.js"></script>
    <script src="steps.js"></script>
</head>
<body>
    <div class="layui-container">
        <h1 class="head">steps 步骤条、时间轴</h1>
        <hr>
        <h2 class="h2-title">1.介绍</h2>
        <p class="paragraph padding-left-20">steps.js是基于原生JavaScript的组件，可用于展示步骤条、时间轴等，功能支持：</p>
        <div class="padding-left-20">
            <p class="paragraph padding-left-20">1. 自适应</p>
            <p class="paragraph padding-left-20">2. 支持横向和纵向显示，并且横向还支持居中显示</p>
            <p class="paragraph padding-left-20">3. 支持自定义间距</p>
            <p class="paragraph padding-left-20">4. 主轴线上下左右单方向及多方向分布</p>
            <p class="paragraph padding-left-20">5. 支持数字和圆点及自定义图标，也可以使用图片</p>
            <p class="paragraph padding-left-20">6. 如果标题和详情还不足以满足您的需求，你还可以插入自定义的html代码</p>
            <p class="paragraph padding-left-20">7. 如果样式不满意，可以加入自定义的父类class，然后根据css的权重重新定义样式</p>
        </div>
        <h2 class="h2-title">2、资源</h2>
        <div class="paragraph padding-left-20">
            <h3 class="h3-title">（1）、首先需要引入样式文件steps.css：</h3>
            <pre class="margin-bottom-5"><code class="html">&lt;link rel="stylesheet" href="steps.css"&gt;</code></pre>
            <h3 class="h3-title">（2）、接下来引入steps.js：</h3>
            <pre class="margin-bottom-5"><code class="html">&lt;script src="steps.js"&gt;&lt;/script&gt;</code></pre>
        </div>
        <h2 class="h2-title">3、使用</h2>
        <div class="paragraph padding-left-20">
            <h3 class="h3-title">（1）、在使用的时候，需要一个容器，例如：</h3>
            <pre class="margin-bottom-5"><code class="html">&lt;div id="steps1"&gt;&lt;/div&gt;</code></pre>
            <h3 class="h3-title">（2）、然后在 JavaScript 中进行初始化：</h3>
            <pre class="margin-bottom-5"><code class="javascript">var steps1 = steps({
    el: "#steps1",
    data: [
        { title: "步骤1", description: "111"},
        { title: "步骤2", description: "222", sides: "start-single" },
        { title: "步骤3", description: "desc步骤3步骤3" }
    ],
    sides: "two-sides",
    active: 1
});</code></pre>
            <h3 class="h3-title">（3）、实际效果如下：</h3>
            <div id="steps1"></div>
            <script>
                var steps1 = steps({
                    el: "#steps1",
                    data: [
                        { title: "步骤1", description: "111"},
                        { title: "步骤2", description: "222", sides: "start-single" },
                        { title: "步骤3", description: "desc步骤3步骤3" }
                    ],
                    sides: "two-sides",
                    active: 1
                });
            </script>
        </div>
        <h2 class="h2-title">4、参数</h2>
        <div class="paragraph padding-left-20">参数详情请直接查看README.md文件。</div>
        <h2 class="h2-title">5、例子</h2>
        <div class="paragraph padding-left-20">
            <h3 class="h3-title">（1）、space: 100px;设置间距</h3>
            <div class="paragraph padding-left-20">
                <div id="steps2"></div>
                <script>
                    var steps2 = steps({
                        el: "#steps2",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        space: 100
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps2"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps1 = steps({
    el: "#steps2",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    space: 100
});</code></pre>
            </div>

            <h3 class="h3-title">（2）、center: true;居中显示</h3>
            <div class="paragraph padding-left-20">
                <div id="steps3"></div>
                <script>
                    var steps3 = steps({
                        el: "#steps3",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        center: true
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps3"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps3 = steps({
    el: "#steps3",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    center: true
});</code></pre>
            </div>

            <h3 class="h3-title">（3）、direction: "vertical";在使用direction: "vertical"的时候，可以在父元素上指定填充的高度，如果未指定，则以内容填充。</h3>
            <div class="paragraph padding-left-20">
                <div>未指定高度：</div>
                <div id="steps4"></div>
                <script>
                    var steps4 = steps({
                        el: "#steps4",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps4"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps4 = steps({
    el: "#steps4",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical"
});</code></pre>
            </div>
            <div class="paragraph padding-left-20">
                <div>指定高度为：300px;</div>
                <div id="steps5" style="height: 300px;"></div>
                <script>
                    var steps5 = steps({
                        el: "#steps5",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        active: 1
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps5" style="height: 300px;"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps5 = steps({
    el: "#steps5",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    active: 1
});</code></pre>
            </div>

            <h3 class="h3-title">（4）、active：1;设置当前活动项</h3>
            <div class="paragraph padding-left-20">
                <div id="steps6"></div>
                <script>
                    var steps6 = steps({
                        el: "#steps6",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        active: 1
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps6"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps6 = steps({
    el: "#steps6",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    active: 1
});</code></pre>
            </div>

            <h3 class="h3-title">（5）、finishLine：false;关闭线条颜色</h3>
            <div class="paragraph padding-left-20">
                <div id="steps7"></div>
                <script>
                    var steps7 = steps({
                        el: "#steps7",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        active: 1,
                        finishLine: false
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps7"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps7 = steps({
    el: "#steps7",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    active: 1,
    finishLine: false
});</code></pre>
            </div>

            <h3 class="h3-title">（5）、sides："start-single";将内容渲染到开始的这一边</h3>
            <div class="paragraph padding-left-20">
                <div id="steps8"></div>
                <script>
                    var steps8 = steps({
                        el: "#steps8",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        sides: "start-single"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps8"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps8 = steps({
    el: "#steps8",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    sides: "start-single"
});</code></pre>
            </div>
            <div class="paragraph padding-left-20">
                <div id="steps9"></div>
                <script>
                    var steps9 = steps({
                        el: "#steps9",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        sides: "start-single"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps9"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps9 = steps({
    el: "#steps9",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    sides: "start-single"
});</code></pre>
            </div>

            <h3 class="h3-title">（6）、iconType："bullets";主轴线icon设置为圆点</h3>
            <div class="paragraph padding-left-20">
                <div id="steps10"></div>
                <script>
                    var steps10 = steps({
                        el: "#steps10",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        center: true,
                        iconType: "bullets"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps10"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps10 = steps({
    el: "#steps10",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    center: true,
    iconType: "bullets"
});</code></pre>
            </div>
            <div class="paragraph padding-left-20">
                <div id="steps11"></div>
                <script>
                    var steps11 = steps({
                        el: "#steps11",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        iconType: "bullets"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps11"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps11 = steps({
    el: "#steps11",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    iconType: "bullets"
});</code></pre>
            </div>
            
            <h3 class="h3-title">（7）、props：暂时由于extend对象合并函数不完善，所以需要将需要用到的参数全部重新设置，哪怕是默认值</h3>
            <div class="paragraph padding-left-20">
                <div id="steps12"></div>
                <script>
                    var steps12 = steps({
                        el: "#steps12",
                        data: [
                            { name: "步骤1", description: "111" },
                            { name: "步骤2", description: "222" },
                            { name: "步骤3", description: "333" }
                        ],
                        props: {
                            title: "name",
                            description: "description"
                        },
                        center: true,
                        iconType: "bullets"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps12"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps12 = steps({
    el: "#steps12",
    data: [
        { name: "步骤1", description: "111" },
        { name: "步骤2", description: "222" },
        { name: "步骤3", description: "333" }
    ],
    props: {
        title: "name",
        description: "description"
    },
    center: true,
    iconType: "bullets"
});</code></pre>
            </div>
            
            <h3 class="h3-title">（8）、data.status 在data中设置每一个的完成状态，此时设置active无效</h3>
            <div class="paragraph padding-left-20">
                <div id="steps13"></div>
                <script>
                    var steps13 = steps({
                        el: "#steps13",
                        data: [
                            { title: "步骤1", description: "111", status: 1 },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333", status: 1 }
                        ],
                        center: true,
                        active: 1,
                        iconType: "bullets"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps13"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps13 = steps({
    el: "#steps13",
    data: [
        { title: "步骤1", description: "111", status: 1 },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333", status: 1 }
    ],
    center: true,
    active: 1,
    iconType: "bullets"
});</code></pre>
            </div>

            <h3 class="h3-title">（9）、data.side 在data中设置每一个在主轴线的哪方显示，外层的sides需要设置为"two-sides"</h3>
            <div class="paragraph padding-left-20">
                <div id="steps14"></div>
                <script>
                    var steps14 = steps({
                        el: "#steps14",
                        data: [
                            { title: "步骤1", description: "111", status: 1 },
                            { title: "步骤2", description: "222", side: "start-single" },
                            { title: "步骤3", description: "333", status: 1 }
                        ],
                        center: true,
                        active: 1,
                        iconType: "bullets",
                        sides: "two-sides"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps14"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps14 = steps({
    el: "#steps14",
    data: [
        { title: "步骤1", description: "111", status: 1 },
        { title: "步骤2", description: "222", side: "start-single" },
        { title: "步骤3", description: "333", status: 1 }
    ],
    center: true,
    active: 1,
    iconType: "bullets",
    sides: "two-sides"
});</code></pre>
            </div>
            <div class="paragraph padding-left-20">
                <div id="steps15" style="height: 200px;"></div>
                <script>
                    var steps15 = steps({
                        el: "#steps15",
                        data: [
                            { title: "步骤1", description: "111", status: 1 },
                            { title: "步骤2", description: "222", side: "start-single" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        center: true,
                        active: 1,
                        iconType: "bullets",
                        sides: "two-sides"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps15"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps15 = steps({
    el: "#steps15",
    data: [
        { title: "步骤1", description: "111", status: 1 },
        { title: "步骤2", description: "222", side: "start-single" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    center: true,
    active: 1,
    iconType: "bullets",
    sides: "two-sides"
});</code></pre>
            </div>
            
            <h3 class="h3-title">（10）、data.icon 主轴线的icon自定义，外层的iconType需要设置为"custom"，如果外层的iconType设置为"custom"，但是data没有传icon值的话依然以默认参数Number</h3>
            <div class="paragraph padding-left-20">
                <div id="steps16"></div>
                <script>
                    var steps16 = steps({
                        el: "#steps16",
                        data: [
                            { title: "步骤1", description: "111", status: 1 },
                            { title: "步骤2", description: "222", side: "start-single" },
                            { title: "步骤3", description: "333", status: 1 }
                        ],
                        center: true,
                        active: 1,
                        iconType: "custom",
                        sides: "two-sides",
                        customClass: "custom-class"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="style">body .custom-class .steps-horizontal .step-line  {
    top: 19px;
}
.step-icon-custom-box {
    width: 40px;
    height: 40px;
}
.step-icon-custom {
    margin-top: -2px;
    font-size: 26px;
}</code></pre>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps16"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps16 = steps({
    el: "#steps16",
    data: [
        { title: "步骤1", description: "111", status: 1 },
        { title: "步骤2", description: "222", side: "start-single" },
        { title: "步骤3", description: "333", status: 1 }
    ],
    center: true,
    active: 1,
    iconType: "custom",
    sides: "two-sides",
    customClass: "custom-class"
});</code></pre>
            </div>
            <div class="paragraph padding-left-20">
                <div id="steps17" style="height: 260px;"></div>
                <script>
                    var steps17 = steps({
                        el: "#steps17",
                        data: [
                            { title: "步骤1", description: "111", icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-wechat"></use></svg>' },
                            { title: "步骤2", description: "desc步骤2步骤2", status: 1, icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-alipay"></use></svg>' },
                            { title: "步骤3", description: "desc步骤3步骤3", icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-QQ"></use></svg>' }
                        ],
                        direction: "vertical",
                        center: true,
                        active: 1,
                        iconType: "custom",
                        sides: "two-sides",
                        customClass: "custom-class"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="style">body .custom-class .steps-vertical .step-line  {
    top: 19px;
}
.step-icon-custom-box {
    width: 40px;
    height: 40px;
}
.step-icon-custom {
    margin-top: -2px;
    font-size: 26px;
}</code></pre>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps17"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps17 = steps({
    el: "#steps17",
    data: [
        { title: "步骤1", description: "111", icon: '&lt;svg class="icon" aria-hidden="true"&gt;&lt;use xlink:href="#icon-wechat"&gt;&lt;/use&gt;&lt;/svg&gt;' },
        { title: "步骤2", description: "desc步骤2步骤2", status: 1, icon: '&lt;svg class="icon" aria-hidden="true"&gt;&lt;use xlink:href="#icon-alipay"&gt;&lt;/use&gt;&lt;/svg&gt;' },
        { title: "步骤3", description: "desc步骤3步骤3", icon: '&lt;svg class="icon" aria-hidden="true"&gt;&lt;use xlink:href="#icon-QQ"&gt;&lt;/use&gt;&lt;/svg&gt;' }
    ],
    direction: "vertical",
    center: true,
    active: 1,
    iconType: "custom",
    sides: "two-sides",
    customClass: "custom-class"
});</code></pre>
            </div>

            <h3 class="h3-title">（11）、data.customHtml 在data中设置每一个的自定义内容</h3>
            <div class="paragraph padding-left-20">
                <div id="steps18"></div>
                <script>
                    var steps18 = steps({
                        el: "#steps18",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222", customHtml: "<div>我是2的自定义内容</div>" },
                            { title: "步骤3", description: "333" }
                        ],
                        center: true,
                        active: 1,
                        iconType: "bullets"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps18"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps18 = steps({
    el: "#steps18",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222", customHtml: "<div>我是2的自定义内容</div>" },
        { title: "步骤3", description: "333" }
    ],
    center: true,
    active: 1,
    iconType: "bullets"
});</code></pre>
            </div>

            <h3 class="h3-title">（12）、customClass: "beautify" 自定义样式</h3>
            <div class="paragraph padding-left-20">
                <style>
                    .beautify .step-icon-custom-box {
                        width: 50px;
                        height: 50px;
                    }
                    .beautify .step-line {
                        left: 24px;
                    }
                    .beautify .step-icon-custom,
                    .beautify-icon {
                        display: block;
                        width: 100%;
                        height: 100%;
                        margin: 0;
                        border-radius: 50%;
                    }
                    .beautify-icon1 {
                        background: #ddd url(xiaoming.jpg) center no-repeat no-repeat;
                        background-size: 50px 50px;
                    }
                    .beautify-icon2 {
                        background: #ddd url(xiaohong.jpg) center no-repeat no-repeat;
                        background-size: 50px 50px;
                    }
                    .beautify .steps-column .step-body {
                        padding: 0;
                        margin: 0 10px;
                        flex-basis: auto;
                        flex-shrink: 0;
                        flex-grow: 0;
                        max-width: 100%;
                    }
                    .beautify .steps-column-start .step {
                        flex-direction: row-reverse;
                    }
                    .beautify .step-title,
                    .beautify .step-description {
                        padding: 10px 10px 6px;
                    }
                    .beautify .step-title {
                        border-radius: 8px 8px 0 0;
                    }
                    .beautify .step-description {
                        padding-top: 0;
                        border-radius: 0 0 8px 8px;
                    }
                    .beautify .steps-column-start .step-title,
                    .beautify .steps-column-start .step-description {
                        color: #fff;
                        background: #fdb336;
                    }
                    .beautify .steps-column-end .step-title,
                    .beautify .steps-column-end .step-description {
                        color: #fff;
                        background: #2196F3;
                    }
                </style>
                <div id="steps19" style="height: 400px;"></div>
                <script>
                    var steps19 = steps({
                        el: "#steps19",
                        data: [
                            { title: "小明", description: "明天就中秋了，想不想一起出去玩呢？", icon: "<i class='beautify-icon beautify-icon1'></i>" },
                            { title: "小红", description: "我考虑考虑", icon: "<i class='beautify-icon beautify-icon2'></i>", side: "start-single" },
                            { title: "小明", description: "这么好的天气，不出去转转，在家里都发霉了，明天去......", icon: "<i class='beautify-icon beautify-icon1'></i>" },
                            { title: "小红", description: "好的", icon: "<i class='beautify-icon beautify-icon2'></i>", side: "start-single" }
                        ],
                        direction: "vertical",
                        sides: "two-sides",
                        active: 3,
                        iconType: "custom",
                        customClass: "beautify"
                    });    
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps19"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps19 = steps({
    el: "#steps19",
    data: [
        { title: "小明", description: "明天就中秋了，想不想一起出去玩呢？", icon: "&lt;i class='beautify-icon beautify-icon1'&gt;&lt;/i&gt;" },
        { title: "小红", description: "我考虑考虑", icon: "&lt;i class='beautify-icon beautify-icon2'&gt;&lt;/i&gt;", side: "start-single" },
        { title: "小明", description: "这么好的天气，不出去转转，在家里都发霉了，明天去......", icon: "&lt;i class='beautify-icon beautify-icon1'&gt;&lt;/i&gt;" },
        { title: "小红", description: "好的", icon: "&lt;i class='beautify-icon beautify-icon2'&gt;&lt;/i&gt;", side: "start-single" }
    ],
    direction: "vertical",
    sides: "two-sides",
    active: 3,
    iconType: "custom",
    customClass: "beautify"
});</code></pre>
                <pre class="margin-bottom-5"><code class="style">.beautify .step-icon-custom-box {
    width: 50px;
    height: 50px;
}
.beautify .step-line {
    left: 24px;
}
.beautify .step-icon-custom,
.beautify-icon {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
}
.beautify-icon1 {
    background: #ddd url(xiaoming.jpg) center no-repeat no-repeat;
    background-size: 50px 50px;
}
.beautify-icon2 {
    background: #ddd url(xiaohong.jpg) center no-repeat no-repeat;
    background-size: 50px 50px;
}
.beautify .steps-column .step-body {
    padding: 0;
    margin: 0 10px;
    flex-basis: auto;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 100%;
}
.beautify .steps-column-start .step {
    flex-direction: row-reverse;
}
.beautify .step-title,
.beautify .step-description {
    padding: 10px 10px 6px;
}
.beautify .step-title {
    border-radius: 8px 8px 0 0;
}
.beautify .step-description {
    padding-top: 0;
    border-radius: 0 0 8px 8px;
}
.beautify .steps-column-start .step-title,
.beautify .steps-column-start .step-description {
    color: #fff;
    background: #fdb336;
}
.beautify .steps-column-end .step-title,
.beautify .steps-column-end .step-description {
    color: #fff;
    background: #2196F3;
}</code></pre>
            </div>
        </div>
        <div style="margin: 20px 0 10px;">关于前端知识，你可以进入我的博客查看更多知识：
            <a target="_blank" href="http://www.fxss5201.cn/" style="color: #1e9fff">樊小书生的博客</a>。
        </div>
        <p class="copyright" style="margin-bottom: 50px;">
            Copyright © 2018
            <a href="http://www.fxss5201.cn/" target="_blank" title="樊小书生" style="color: #1e9fff">樊小书生</a>
            <a href="http://www.miitbeian.gov.cn">晋ICP备17012454号</a>
        </p>
    </div>
    <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>